<template>
  <div class="activity">
    <div class="banner_why">
      <h1>市场活动</h1>
    </div>
    <div class="activity_content">
      <h1>市场活动</h1>
      <div class="acti_detail">
        <router-link to="activity_five">
          <div class="acti_img">
            <img src="./images/five.jpg" alt="">
            <span>已结束</span>
          </div>
          <div class="acti_text">
            <span>"英联旺财，莺春起舞"活动回馈</span>
            <span>2018年03月15日-2018年06月15日</span>
          </div>
        </router-link>
      </div>
      <div class="acti_detail">
        <router-link to="activity_one">
          <div class="acti_img">
            <img src="./images/one.jpg" alt="">
            <span>已结束</span>
          </div>
          <div class="acti_text">
            <span>金鸡贺岁 新老客户迎大礼</span>
            <span>2016.12.23-2017.02.28</span>
          </div>
        </router-link>
      </div>
      <div class="acti_detail">
        <router-link to="activity_two">
          <div class="acti_img">
            <img src="./images/two.jpg" alt="">
            <span>已结束</span>
          </div>
          <div class="acti_text">
            <span>猴年开红包 UKDFX盈门</span>
            <span>2016.12.18-2016.05.31</span>
          </div>
        </router-link>
      </div>
      <div class="acti_detail">
        <router-link to="activity_three">
          <div class="acti_img">
            <img src="./images/three.jpg" alt="">
            <span>已结束</span>
          </div>
          <div class="acti_text">
            <span>马尔代夫双人豪华游</span>
            <span>2015.06.01-2015.12.31</span>
          </div>
        </router-link>
      </div>
      <div class="acti_detail">
        <router-link to="activity_four">
          <div class="acti_img">
            <img src="./images/four.jpg" alt="">
            <span>已结束</span>
          </div>
          <div class="acti_text">
            <span><nobr>UKD参加香港iFX EXPO ASIA展会</nobr></span>
            <span>2015.01.27-2015.01.29</span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

</script>

<style lang="stylus" rel="stylesheet/stylus">
  .activity
    background: #f5f5f5
    .banner_why
      width: 100%
      height: 200px
      background: url("../../../static/images/banner.jpg") no-repeat
      background-size: 100% 100%
      padding-top:116.5px
      padding-left:40px
      box-sizing: border-box
      h1
        font-size: 20px
        color: #fff
    .activity_content
      padding:20px 18px 25px
      box-sizing: border-box
      h1
        font-size: 18px
        color: #ff9c00
        font-weight: bold
        margin-bottom: 20px
      .acti_detail
        height: 152px
        background: #fff
        margin-top: 10px
        a
         display: block
        .acti_img
          height: 124.5px
          position: relative
          overflow: hidden
          img
            height: 124.5px
          span
            position: absolute
            bottom: 0
            height: 22px
            width: 100%
            background: rgba(0,0,0,0.35)
            line-height: 22px
            text-align: center
            font-size: 9px
            color: #fff
        .acti_text
          width: 100%
          height: 29px
          border: 1px solid #e5e5e5
          border-top: 0 solid #e5e5e5
          padding: 0 20px
          display: flex
          span
            flex: 1
            text-align: left
            line-height: 29px
          span:nth-child(1)
            font-size: 13px
            color: #333
            text-overflow: ellipsis;
            overflow: hidden;
          span:nth-child(2)
            text-align: right
            font-size: 8px
            color: #9f9f9f
      .acti_detail:nth-child(1)
        margin-top: 0
</style>
